{include="header"}

{function="uniform('aristo')"}

{if="$dsfm_lang==en"}
	{function="jquery_validate()"}
{else}
	{function="jquery_validate('th')"}
{/if}

<div class ="wrapper">

	<div class = "main" id = "contact">
		<h1 class = "fr">{$e['contact-us']}</h1>

		<div class = "content">
			<h2>{$e['contact-info']}</h2>

			<div class = "fr col1">
				<span class = "head">{$e['cha-am']}</span>
				<span class = "detail">{$e['cha-am-office-address']}</span>
				<span class = "tel"><b>{$e['tel']}</b> 0 2343 6921-8</span>
				<span class = "tel"><b>{$e['fax']}</b> 0 2343 7537</span>
				<span class = "tel"><b>{$e['email']} :</b> <a href = "mailto:santoriniwaterfantasy@gmail.com">santoriniwaterfantasy@gmail.com</a></span>
			</div>

			<div class = "fl col1">
				<span class = "head">{$e['head-office']}</span>
				<span class = "detail">{$e['office-address']}</span>
				<span class = "tel"><b>{$e['tel']}</b> 0 2343 6921-8</span>
				<span class = "tel"><b>{$e['fax']}</b> 0 2343 7537</span>
			</div>

			<div class ="clear"></div>

			<div class = "contact-form">
				<h2>{$e['contact-form']}</h2>
				<form action = "contact-send.php" method = "post" id = "contact-form">
					<ul>
						<li>
							<label for = "faq">{$e['faq']} :</label>
							<select name = "sid" id = "faq">
								{loop="all_subject"}
									<option value = "{$value.id}">{$value.subject}</option>
								{/loop}
							</select>
						</li>
						<li><label for = "topic">{$e['subject']} :</label><input type = "text" id = "topic" name = "topic"  class = "input validate[required]"></li>
						<li><label for = "name">{$e['name']} :</label><input type = "text" id = "name" name = "name"  class = "input validate[required]"></li>
						<li><label for = "tel">{$e['telephone']} :</label><input type = "text" name = "tel" id = "tel" class = "input"></li>
						<li><label for = "email">{$e['email']} :</label><input type = "text" id = "email" name = "email"  class = "input validate[required,custom[email]]"></li>
						<li><label for = "message">{$e['detail']} :</label><textarea name = "message" id = "message"  class = "input" style = "height:100px;"></textarea></li>
					</ul>
					<input type = "submit" value = "submit" class = "btn-submit">
					<div class = "clear"></div>
				</form>
			</div>

			<div class = "map">
				<ul class = "tab">
					<li id = "tab1" class = "active">Google Map</li>
					<li id = "tab2">Graphic Map</li>
				</ul>
				<div class = "google-map display-map">
				<iframe width="650" height="400" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.co.th/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=santorini+water+fantasy+&amp;aq=&amp;sll=13.0376,101.491373&amp;sspn=23.180675,43.286133&amp;ie=UTF8&amp;hq=santorini+water+fantasy&amp;hnear=&amp;t=m&amp;ll=12.843436,99.948978&amp;spn=0.058578,0.11158&amp;z=13&amp;iwloc=A&amp;output=embed"></iframe><br />
				</div>
				<div class = "graphic-map display-map"><img src="images/graphic.png"></div>
			</div>

		</div>
	</div>

	<div class = "sidebar">
		<ul>
			<li>{$e['contact-us']}</li>
			<li><a href = "contact.html">{$e['contact-us']}</a></li>
			<li><a href = "career.html">{$e['career']}</a></li>
		</ul>
	</div>
</div>

<script>
$(document).ready(function(){
	$("#tab1").click(function(){
		$(".google-map").show();
		$(".graphic-map").hide();
		$("#tab2").removeClass("active");
		$(this).addClass("active");
	});

	$("#tab2").click(function(){
		$(".google-map").hide();
		$(".graphic-map").show();
		$("#tab1").removeClass("active");
		$(this).addClass("active");
	});

	$("select").uniform();

	$("#contact-form").validationEngine();
});
</script>

{include="footer"}